<!-- 添加任务 -->
<template>
  <div class="add-task">
    <van-nav-bar title="阀值设置" left-arrow @click-left="() => $router.go(-1)" safe-area-inset-top>
      <template #left>
        <img style="width: 25px" src="../../assets/images/返回2.png" alt="" />
      </template>
    </van-nav-bar>
    <!-- 表单 -->
    <div class="form">


      <div>
        <span>类型</span>

        <van-popover v-model="showPopover" trigger="click" :actions="swlist" @select="onSelect" :offset="[-20, 8]">
          <template #reference>
            <span>{{ form.swname }}</span>
            <img src="../../assets/images/下拉.png" alt="" />
          </template>
        </van-popover>
      </div>
      <div>
        <span>条件</span>

      </div>
      <div>
        <span>大于</span>
        <van-stepper v-model="maxnum" step="0.1" min="0" :decimal-length="1" />

      </div>
      <div>
        <span>小于</span>
        <van-stepper v-model="minnum" step="0.1" min="0" :decimal-length="1" />

      </div>
      <div>
        <span>选择开关</span>
      </div>
      <div>
        <ul style="    width: 100%;">
          <li style="width:25%;float:left" v-for="item in devicelist" v-bind:key="item">
            <van-switch v-model="item.state" />
     
            <p>{{item.name}}</p>
          </li>
        </ul>


      </div>

      <div>
        <span>是否短信提醒</span>
        <van-switch v-model="form.issms" size="16" />
      </div>
      <div class="btn">
        <van-button round block type="info" @click="onSubmit"
          color="linear-gradient(to right, rgb(120, 184, 246), rgb(29,97,214))" style="font-size: 20px">保 存</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from '../../utils/bus.js'

import { sensorInfo } from "../../api/sensor";
import { fazhiAdd } from "../../api/fazhi";

import { deviceInfo, deviceRenWuAdd, deviceList } from "../../api/device";
export default {
  name: "",
  data() {
    return {
      sshow: false,
      eshow: false,
      showPopover: false,
      showType: false,
      // 通过 actions 属性来定义菜单选项
      actions: [],
      swlist: [],
      form: {
        state: true,
        swname: "请选择",
        index: 0,
        stime: '请选择',
        etime: '请选择',
        type: ''
      },
      issms: false,
      devicelist: [],
      properties: [],
      maxnum: 0,
      minnum: 0,
      sensor_id: 0
    };
  },
  methods: {

    // 渔塘选择
    onSelect(action) {
      // this.$toast(action.text);

      this.form.type = action.id;
      this.form.swname = action.text;
    },
    // 方式选择
    typeSelect(val) {
      this.form.type = val.text
    },
    // 保存
    async onSubmit() {




      this.form.userid = localStorage.getItem("userid");
      this.form.sensor_id = this.sensor_id;
      this.form.device = JSON.stringify(this.devicelist);
      this.form.maxnum = this.maxnum;
      this.form.minnum = this.minnum;
      console.log("??", this.form);
      if (this.form.type == undefined || this.form.type == "") {
        this.$toast("请选择类型");
        return;
      }
      if (this.form.maxnum == "0.0" && this.form.minnum == "0.0") {
        this.$toast("请输入条件");
        return;
      }

      var devicebool = false;

      for (var i = 0; i < this.devicelist.length; i++) {
        if (this.devicelist[i].state) {
          devicebool = true;
          break;
        }
      }
      if (devicebool == false) {
        this.$toast("请选择开关");
      }



      let res = await fazhiAdd(this.form);
      if (res.status == 200) {

        this.$toast("添加成功");
        setTimeout(() => {
          this.$router.back();
        }, 500);
      }

    },

    async init() {



      var info = await sensorInfo({ code: this.$route.query.dev_sn })
      console.log("info", info);
      if (info.status == 200) {
        var metadata = JSON.parse(info.data.metadata);;
        console.log("metadata", metadata);
        this.sensor_id = info.sensor_id;

        var properties = metadata.properties;
        for (var i = 0; i < properties.length; i++) {
          this.swlist.push({ text: properties[i].name, id: properties[i].id });
        }

      }


      var list = await deviceList({ aid: this.$route.query.aid, userid: localStorage.getItem("userid") });
      console.log("list", list);
      if (list.status == 200) {
        var devicelist = [];
        for (var i = 0; i < list.data.length; i++) {
          var obj = {};
          obj.id = list.data[i].id;
          obj.name = list.data[i].name;
          obj.state = false;
          devicelist.push(obj);

        }
        this.devicelist = devicelist;
      }



    }
  },
  computed: {},
  watch: {},
  created() {
    this.init();
  },
  mounted() { },
  destroyed() {
    // Bus.$emit('task', "");
  },
};
</script>

<style lang="scss" scoped>
.add-task {
  width: 100%;


  .form {
    padding-bottom: 120px;
    width: 93%;
    height: calc(100% - 220px);
    background-color: #fff;
    margin: 20px auto;
    border-radius: 15px;
    overflow: hidden;
    padding: 20px;

    .btn {
      width: 50%;
      border: none;
      margin: 100px auto 0;
    }

    >div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 26px;
      border-bottom: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 20px;

      img {
        width: 26px;
        margin-left: 20px;
      }
    }
  }
}
</style>
